<template>
  <!--地图-->
  <div
    :style="{width:width,height:height}"
    style=""
  ></div>
</template>

<script>
  import '@/map/china.js'
  import '@/map/province/beijing.js'
  import '@/map/province/shanghai.js'
  import '@/map/province/tianjin.js'
  import '@/map/province/chongqing.js'
  import '@/map/province/liaoning.js'
  import '@/map/province/anhui.js'
  import '@/map/province/fujian.js'
  import '@/map/province/gansu.js'
  import '@/map/province/guangdong.js'
  import '@/map/province/guangxi.js'
  import '@/map/province/guizhou.js'
  import '@/map/province/hainan.js'
  import '@/map/province/hebei.js'
  import '@/map/province/heilongjiang.js'
  import '@/map/province/henan.js'
  import '@/map/province/hubei.js'
  import '@/map/province/hunan.js'
  import '@/map/province/jiangsu.js'
  import '@/map/province/jiangxi.js'
  import '@/map/province/jilin.js'
  import '@/map/province/neimenggu.js'
  import '@/map/province/ningxia.js'
  import '@/map/province/qinghai.js'
  import '@/map/province/shandong.js'
  import '@/map/province/shanxi.js'
  import '@/map/province/shanxi1.js'
  import '@/map/province/sichuan.js'
  import '@/map/province/xinjiang.js'
  import '@/map/province/xizang.js'
  import '@/map/province/zhejiang.js'
  import '@/map/province/yunnan.js'
  import MapData from '@/config'
  import eChartsLocationData from '@/config/eChartsLocationData'
  const that = this
  export default {
    name: 'ChinaMap',
    props: {
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '330px'
      }
    },
    data() {
      return {
        provinceList: MapData.originProvinceList,
        localData: eChartsLocationData.eChartsLocationData
      }
    },
    mounted() {
      this.$bus.$off('mapInit')
      this.$bus.$on('mapInit', this.initChart)
    },
    methods: {
      initChart(chartDataDataList, chartDataName, rangeMin, rangeMax) {
        let that = this
        const cloudData = this.$store.getters.getCurrentMapOne
        this.chart = this.$echarts.init(this.$el)
        this.chart.clear()
        let option = {
          tooltip: {
            trigger: "item",
            formatter(e) {
              if (e.data) {
                const code = that.localData.find(i => i.name === e.data.name).code
                const name = cloudData.find(i => i.code === code).name
                return `${name}: ${e.data.value}`
              }
            }
          },
          grid: {
            left: '0%',
            right: '0%',
            bottom: '0%',
            top: '0%',
            containLabel: true
          },
          visualMap: {
            min:0,
            max: 100,
            padding: 25,
            type: "piecewise",
            align: 'left',
            left: 0,
            bottom: 0,
            pieces: [
              { gt: rangeMax, label: `>${rangeMax}`, color: "rgba(177,237,80,.7)" },
              { gt: rangeMin, lte: rangeMax, label: `${rangeMin}~${rangeMax}`, color: "rgba(255,135,31,1)" },
              { gt: 0, lte: rangeMin, label: `0~${rangeMin}`, color: "rgba(255,26,26,.7)" },
              { value: 0, color: "#006699" }
            ],
            textStyle: {
              color: '#ffffff'
            }
          },
          roamController: {
            show: true,
            left: "right",
          },
          geo: {
            // 地理坐标系组件用于地图的绘制
            map: chartDataName === '全国' ? 'china' : chartDataName,
            roam: true, // 不开启缩放和平移
            zoom: 1.2,
            label: {
              normal: {
                show: true,
                fontSize: "14",
                color: "#FFFFFF",
                fontFamily: 'Microsoft YaHei',
                formatter(e) { // 显示个性名字
                  if (that.localData.find(i => i.name === e.name)) {
                    const code = that.localData.find(i => i.name === e.name).code
                    if (cloudData.find(i => i.code === code)) {
                      return cloudData.find(i => i.code === code).name
                    } else {
                      return e.name
                    }
                  } else {
                    e.name
                  }
                }
              }
            },
            itemStyle: {
              normal: {
                show: true,
                borderColor: "rgba(0, 0, 0, 0.2)",
                areaColor: '#006699', // 默认颜色
              },
              emphasis: {
                areaColor: "#3aaac3", //鼠标选择区域颜色
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
                textStyle:{
                  color:'#FFFFFF'
                }
              },
            },
          },
          series: [
            {
              type: "map", //图表类型
              geoIndex: 0,
              data: chartDataDataList, //图表的数据
            }
          ]
        }
        this.chart.setOption(option)
        this.chart.off('click') // 避免点击两次
        this.chart.on('click', params => {
          // 数据里面没有的省(市), 点击无效
          if (this.$store.getters.getValidProvinceList.some(item => item.name === params.name)) {
            this.$emit('clickOnMap', this.provinceList.find(item => item.name === params.name).code)
          } else {
            return false
          }
        })
      }
    }
  }
</script>

<style scoped>
</style>
